<template>
    <div>
        <div class="vs-table-box orderStatus">
            <div class="form_info">
                <el-form ref="form" :rules="rules" :model="form" label-width="120px">
                    <el-form-item label="会员卡号" prop="vip_no">
                        <el-input v-model="form.vip_no" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="realname">
                        <el-input v-model="form.realname" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <el-select v-model="form.gender" placeholder="">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="form.phone" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="生日" prop="birthday">
                        <el-date-picker v-model="form.birthday" value-format="yyyy-MM-dd" type="date" placeholder="" style="width: 380px">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="会员地址" prop="value">
                        <el-cascader :props="props" filterable class="vs-w-380" ref="regionDom" @change="chioseAddress" v-model="form.value" clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址" prop="address">
                        <el-input v-model="form.address" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="会员等级" prop="vip_id">
                        <el-select v-model="form.vip_id" placeholder="">
                            <el-option v-for="item in vipList" :key="item.id" :label="item.title" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="会员来源" prop="source2">
                        <el-select v-model="form.source" placeholder="" @change="selectSource">
                            <el-option label="老客户推荐" :value="2"></el-option>
                            <el-option label="顾客来店" :value="3"></el-option>
                            <el-option label="小程序" :value="5"></el-option>
                            <el-option label="抖音" :value="6"></el-option>
                            <el-option label="美团" :value="7"></el-option>
                            <el-option label="其他" :value="4"></el-option>
                            <el-option label="老系统数据" :value="8"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="推荐人" v-if="form.source == 2" prop="pid">
                        <p style="width:380px" class="referrer" :class="referrer ? 'isUser' : ''" @click="openUserDialog()">
                            {{ referrer || "请选择" }}
                        </p>
                    </el-form-item>
                    <el-form-item label="头围" prop="header">
                        <el-input v-model="form.header" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="前后" prop="around">
                        <el-input v-model="form.around" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="左右" prop="about">
                        <el-input v-model="form.about" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="兴趣爱好：" prop="user_like ">
                        <el-input v-model="form.user_like" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form.remarks" class="vs-w-500" type="textarea" :rows="4"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-bottom-btns btns">
                <el-button @click="utils.backPage()">返回</el-button>
                <el-button @click="subitm('form')" :loading="isBtn" type="primary">确定</el-button>
            </div>
            <!-- 选择推荐人 -->
            <recommender v-model="dialogTableVisible" @confirm="confirmUser"></recommender>
        </div>
    </div>
</template>

<script>
import Recommender from '@/components/Recommender.vue';
export default {
    components: { Recommender },
    data() {
        return {
            userloading: false,
            isBtn: false,
            vipList: [],
            value: "",
            dialogTableVisible: false,
            form: {
                realname: "", //姓名
                phone: "", //手机号码
                gender: "", //性别 1 男 2 女
                birthday: "", //生日
                vip_id: "", //会员等级
                vip_no: "", //会员卡号 编辑不传这个字段
                address: "", //用户地址
                source: "", //来源1朋友推荐 2老顾客推荐 3顾客来店 4其他 5：小程序 编辑不传这个字段
                pid: "", //推荐人id 用户来源为朋友推荐或老顾客推荐才有 编辑不传这个字段
                remarks: "", //备注
                header: "", //头围
                around: "", //前后
                about: "", //左右d
                province_id: "", //省
                city_id: "", //城市
                area_id: "", //区/县
                user_like:"",//兴趣爱好
                value: "",
                town_id: ''
            },
            props: {
                lazy: true,
                lazyLoad: async (node, resolve) => {
                    const { value } = node;
                    console.log(node, 'node');
                    let { code, data = [] } = await this.$Http.tree({ pid: value });
                    data.forEach(v => {
                        v.label = v.area_name;
                        v.value = v.id;
                        v.leaf = v.level >= 5
                    })
                    // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                    resolve(data);
                }
            },
            rules: {
                vip_no: { required: true, message: "请输入会员卡号", trigger: "blur" },
                realname: { required: true, message: "请输入姓名", trigger: "blur" },
                phone: { required: true, message: "请输入手机号", trigger: "blur" },
                gender: { required: true, message: "请选择性别", trigger: "change" },
                birthday: { required: true, message: "请选择生日", trigger: "change" },
                pid: [{ required: true, message: "请选择推荐人", trigger: "blur" }],
                vip_id: {
                    required: true,
                    message: "请选择会员等级",
                    trigger: "change",
                },
                address: {
                    required: true,
                    message: "请输入用户详细地址",
                    trigger: "blur",
                },
                header: { required: true, message: "请输入头尾", trigger: "blur" },
                around: { required: true, message: "请输入前后", trigger: "blur" },
                about: { required: true, message: "请输入左右", trigger: "blur" },
                store_id: { required: true, message: "请选择门店", trigger: "change" },
                value: {
                    required: true,
                    message: "请选择会员地址",
                    trigger: "change",
                },
            },
            region: [], //地址列表
            
            referrer: "", //推荐人
        };
    },
    async created() {
        await this.getVip();
        await this.getAddressList();
        let { id, type } = this.$route.query;
        if (id) {
            // this.getRoom(id);
        }
    },
    methods: {
        confirmUser({id,realname}){
            this.form.pid = id;
            this.referrer = realname;
        },
        // 选择来源  选择朋友或者老顾客推荐才有推荐人
        selectSource(ele) {
            if (ele == 3 || ele == 4 || ele == 5) {
                this.form.pid = "";
                this.referrer = "";
            }
        },
        openUserDialog() {
            this.dialogTableVisible = true;
            // this.getUserList();
        },
        
        // 获取地址列表
        async getAddressList() {
            let { code, data } = await this.$Http.tree();
            if (code) {
                this.region = this.asd(data || []);
                console.log(this.region, "this.region");
            }
        },
        asd(list) {
            //遍历
            return list.map((v, i) => {
                v.label = v.area_name;
                v.value = v.id;
                if (v.child) {
                    v.children = this.asd(v.child);
                    delete v.child;
                }
                return v;
            });
        },
        chioseAddress(e) {
            console.log(e);
            this.form.province_id = e[0];
            this.form.city_id = e[1];
            this.form.area_id = e[2];
            this.form.town_id = e[3];
        },
        async getVip() {
            let { code, data } = await this.$Http.getVip();
            if (code === 10000) {
                console.log(data);
                this.vipList = data;
            }
        },
        tk() {
            if (this.goodsType == 1) {
                this.dialogVisible = true;
            } else {
                this.utils.goUrl("/orderRefund");
            }
        },
        async subitm(form) {
            this.$refs.form.validate(async (valid) => {
                if (!valid) return;
                this.isBtn = true;
                let form = { ...this.form };
                let { code, data } = await this.$Http.setUser(form);
                this.isBtn = false;
                if (code) {
                    this.$message.success("添加成功");
                    localStorage.setItem('isBack', true);
                    if(this.$route.query.returnUser==1){
                        sessionStorage.setItem("cashier_user_id",data)
                    }
                    this.$router.go(-1);
                }
            });

            // let {code , data}  =await this.$Http.setUser(form)
            // if(code === 10000) {
            //     console.log(data)
            //     this.$message.success('添加成功')
            //     this.$router.go(-1)

            // }
            // this.isBtn = false
        },
        dialogBeforeClose() {
            this.dialogVisible = false;
        },
    },
};
</script>

<style>
.disabled .el-upload--picture-card {
    display: none !important;
}
</style><style lang="scss" scoped>
:v-deep {
}

.orderStatus {
    padding: 40px 40px;
    display: flex;
    flex-direction: column;

    .form_info {
        width: 500px;
    }
}
.referrer {
    width: 300px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #c0c4cc;
    line-height: 40px;
    padding: 0 15px;
    margin: 0;
    cursor: pointer;
}
.isUser {
    color: #606266;
}
.vs-table-box {
    margin-top: 0;
}

.jc-e {
    margin-bottom: 20px;
}
.vs-m-r-20 {
    margin-right: 20px;
}
</style>
